<template>
  <div class="setPurview">
    <el-drawer title="我是标题" :visible.sync="drawerVisible" size="40%" :with-header="false" @close="cancelForm">
      <div class="drawerForm">
        <div class="pageTitle">
          <span class="titleBorder">|</span>
          <div class="titleText">设置功能权限</div>
          <slot name="header" />
          <el-divider />
        </div>
        <el-form
          ref="formData"
          :model="formData"
          label-width="87px"
          style="height: calc(100% - 164px); margin: 0px 30px"
        >
          <el-row style="border-bottom: 2px dashed #dcdfe6">
            <el-col :span="12">
              <el-form-item label="角色名称：" prop="roleName">
                <el-input v-model="formData.roleName" disabled placeholder="请输入用户姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色ID：" prop="roleId">
                <el-input v-model="formData.roleId" disabled placeholder="请输入登录账号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="menuBox">
            <el-col class="title">
              <span style="margin-right: 20px">授权功能菜单</span>
              <el-checkbox v-model="openOrFold" @change="spreadTree">展开/折叠</el-checkbox>
              <el-checkbox v-model="allCheck" @change="handleAllCheck">全选/全不选</el-checkbox>
              <el-checkbox v-model="checkStrictly">父子联动</el-checkbox>
            </el-col>

            <el-col class="menu">
              <el-tree
                ref="tree"
                :data="treeList"
                show-checkbox
                node-key="id"
                highlight-current
                :props="defaultProps"
                :check-strictly="!checkStrictly"
              />
            </el-col>
          </el-row>
        </el-form>
        <div class="drawerFooter" align="right">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { loadRightTree, loadRoleRightIds, setRoleRights } from '@/api/system-management'
import { resetRouterMenu } from '@/router'
export default {
  name: 'SetPurview',
  components: {},
  data() {
    return {
      drawerVisible: false,
      // 树data
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      formData: {
        roleId: null,
        roleName: '',
        rightIds: []
      },
      openOrFold: false,
      allCheck: false,
      checkStrictly: false
    }
  },
  mounted() {
    loadRightTree().then((res) => {
      this.treeList = res.data
    })
  },
  methods: {
    is(currentRow) {
      this.formData = JSON.parse(JSON.stringify(currentRow))
      this.drawerVisible = true
      this.checkStrictly = false
      loadRoleRightIds({ roleId: currentRow.roleId }).then((res) => {
        this.$refs.tree.setCheckedKeys(res.data)
        this.checkStrictly = true
      })
    },

    getAllKeys(data, result) {
      data.forEach((item) => {
        result.push(item.id)
        if (item.children && item.children.length > 0) {
          this.getAllKeys(item.children, result)
        }
      })
      return result
    },
    handleAllCheck(val) {
      if (val) {
        this.$refs.tree.setCheckedKeys(this.getAllKeys(this.treeList, []))
      } else {
        this.$refs.tree.setCheckedKeys([])
      }
    },
    // 展开节点与收缩节点
    spreadTree(flag) {
      this.$nextTick(() => {
        for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
          this.$refs.tree.store._getAllNodes()[i].expanded = flag
        }
      })
    },
    // 提交表单
    submitForm() {
      const arr = this.$refs.tree.getCheckedNodes()
      setRoleRights({
        roleId: this.formData.roleId,
        rightIds: arr.map((item) => item.id)
      }).then(() => {
        if (this.$store.state.user.roles.includes(this.formData.roleId)) {
          resetRouterMenu()
        }
        this.$notify.success('配置成功')
        this.cancelForm()
      })
    },
    // 取消表单
    cancelForm() {
      this.$emit('closeForm')
      this.drawerVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.menuBox {
  height: calc(100% - 68px);
  // overflow-y: auto;
  display: flex;
  flex-direction: column;
  .title {
    font-weight: bold;
    margin-top: 22px;
    margin-bottom: 10px;
  }
  .btnList {
    margin-bottom: 10px;
  }
  .menu {
    border: 1px solid #dcdfe6;
    background-color: #fafafa;
    flex: 1;
    // height: calc(100% - 60px);
    overflow-y: auto;

    .el-tree {
      padding: 22px;
      background-color: #fafafa;

      // /deep/.el-tree-node__expand-icon.expanded {
      //   -webkit-transform: rotate(0deg) !important;
      //   transform: rotate(0deg) !important;
      // }
      // /deep/.el-icon-caret-right:before {
      //   color: #333;
      //   background-color: #fff;
      //   padding: 1px;
      //   /* // 加号图片 */
      //   content: url('../../../assets/imgs/plus-square.png') !important;
      // }
      // /deep/.expanded:before {
      //   color: #333;
      //   background-color: #fff;
      //   padding: 1px;
      //   /* // 减号图片 */
      //   content: url('../../../assets/imgs/minus-square.png') !important;
      // }
      // /deep/.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
      //   opacity: 0;
      // }

      // .is-leaf.el-tree-node__expand-icon.el-icon-caret-right:before {
      //   content: '' !important;
      // }
    }
  }
}
.setPurview {
  height: 100%;
  /deep/label {
    font-weight: 500;
  }
  .drawerForm {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .drawerFooter {
    justify-content: right;
    padding: 20px;
  }
  .pageTitle {
    padding-top: 15px;
    padding-left: 15px;
    font-size: 20px;
    .titleBorder {
      font-weight: bold;
      font-size: 22px;
      color: #00a0e9;
      margin-right: 5px;
    }
    .titleText {
      display: inline;
      padding-right: 20px;
      padding-left: 5px;
    }
  }
}
</style>
